import React, { useEffect } from 'react';
import Slider from "../../components/slider";
import RecommendList from '../../components/list';
import Scroll from "../../baseUI/scroll";
import {Content} from './style'
// react-redux
import { connect } from "react-redux";
// action合集
import * as actionTypes from './store/actionCreators';
import { forceCheck } from 'react-lazyload';
import Loading from "../../baseUI/loading";
import {renderRoutes} from "react-router-config";
function Recommend (props){
    const {
        bannerList,
        recommendList,
        getBannerDataDispatch,
        getRecommendListDataDispatch,
        enterLoading
    } = props;

    useEffect(() => {
        if (!bannerList.size){
            getBannerDataDispatch ();
        }
    }, [bannerList.size, getBannerDataDispatch]);

    useEffect(() => {
        if (!recommendList.size){
            getRecommendListDataDispatch ();
        }
    }, [getRecommendListDataDispatch, recommendList.size]);

    const bannerListJS = bannerList ? bannerList.toJS () : [];
    const recommendListJS = recommendList ? recommendList.toJS () :[];

    return (
        <Content>
            <Scroll className='list' onScroll={forceCheck}>
                <div>
                    <Slider bannerList={bannerListJS} />
                    <RecommendList
                        recommendList={recommendListJS}
                        history={props.history}
                    />
                </div>
            </Scroll>
            { enterLoading ? <Loading />: null }
            { renderRoutes (props.route.routes) }
        </Content>
    );
}
// 映射 Redux 全局的 state 到组件的 props 上
const mapStateToProps = (state) => ({
    bannerList: state.recommend.get('bannerList'),
    recommendList: state.recommend.get('recommendList'),
    enterLoading: state.recommend.get('enterLoading')
});
// 映射 dispatch 到 props 上
const mapDispatchToProps = (dispatch) => {
    return {
        getBannerDataDispatch () {
            dispatch (actionTypes.getBannerList ());
        },
        getRecommendListDataDispatch () {
            dispatch (actionTypes.getRecommendList ());
        },
    }
};

export default connect (mapStateToProps, mapDispatchToProps)(React.memo (Recommend));

